<template>
     <div class="scroll" ref="wrap" style="height:100%">
        <div class="wrap">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
    name:"BScroll",
    props:{
        "pullDownRefresh":{
            type:Boolean,
            default:false
        },
        click:{
            type:Boolean,
            default:false
        },
        pullUpLoad:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
        this.$nextTick(()=>{
            if(!this.scroll){
                this.scroll=new BScroll(this.$refs.wrap,{
                    click:this.click,
                    pullDownRefresh:this.pullDownRefresh,
                    pullUpLoad:true
                });
                this.scroll.on("pullingDown",()=>{
                    this.$emit("pullingDown",this.scroll);
                });
                this.scroll.on("pullingUp",()=>{
                    this.$emit("pullingUp",this.scroll);
                });
                
            }
            else{
                this.scroll.refresh();
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.scroll{
    height: 100%;
    overflow: hidden;
}
</style>
